<template>
  <div class="livelihoodIndexPage">
    <div class="livelihoodLeft">
      <div class="header headerRed">事件总览</div>
      <div class="overview">
        <div class="overviewDiv">
          <div v-for="item of overviewList" :key="item.id" class="overviewItem">
            <div class="name">{{ item.name }}</div>
            <div class="value">
              {{ item.value }}<span v-if="item.unit">{{ item.unit }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="header headerBlue">事件类型统计</div>
      <div class="statistics">
        <div class="chart">
          <dv-active-ring-chart
            :config="statisticsConfig"
            style="width: 100%; height: 100%"
          />
        </div>
        <div class="legend">
          <div
            v-for="(item, index) of statisticsConfig.data"
            :key="index"
            class="legendItem"
          >
            <div class="color" :style="{ background: item.color }"></div>
            <div class="name">{{ item.name }}</div>
            <div class="value">{{ item.value }}</div>
          </div>
        </div>
      </div>
      <div class="header headerBlue">案件办理趋势</div>
      <div class="trendChart">
        <dv-charts :option="trendOption" style="width: 100%; height: 100%" />
      </div>
    </div>
    <div class="livelihoodMiddle"></div>
    <div class="livelihoodRight">
      <div class="header headerRed">各地事件办件量统计</div>
      <div class="manageChart">
        <dv-charts :option="manageOption" style="width: 100%; height: 100%" />
      </div>
      <div class="header headerRed">各区结案率统计</div>
      <div class="tabHeader">
        <div
          class="tabItem"
          :class="tabIndex == 1 ? 'active' : ''"
          @click="onTabClick(1)"
        >办结率</div>
        <div
          class="tabItem"
          :class="tabIndex == 2 ? 'active' : ''"
          @click="onTabClick(2)"
        >办结时长</div>
      </div>
      <div class="tabContent" v-if="tabIndex == 1">
        <dv-scroll-ranking-board
          :config="rateConfig"
          style="width: 100%; height: 100%"
        />
      </div>
      <div class="tabContent" v-if="tabIndex == 2">
        <dv-scroll-ranking-board
          :config="timeConfig"
          style="width: 100%; height: 100%"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      overviewList: [
        { id: 1, name: "今年事件数", value: "1235", unit: "" },
        { id: 2, name: "今年办结率", value: "88", unit: "%" },
        { id: 3, name: "今年结办时长", value: "107", unit: "小时" },
      ],
      statisticsConfig: {
        lineWidth: 5,
        radius: "80%",
        activeRadius: "90%",
        color: ["#ffc13a", "#f25f50", "#85c643", "#fcfcfc"],
        data: [
          {
            name: "便民服务",
            value: 55,
            color: "#ffc13a",
          },
          {
            name: "综合执法",
            value: 120,
            color: "#f25f50",
          },
          {
            name: "市场监管",
            value: 78,
            color: "#85c643",
          },
          {
            name: "综治工作",
            value: 66,
            color: "#fcfcfc",
          },
        ],
      },
      trendOption: {
        legend: {
          top: 20,
          data: [
            { name: "信访", color: "#489cff" },
            { name: "超级访", color: "#f29a40" },
            { name: "诉讼案件", color: "#48ffa5" },
          ],
          textStyle: {
            fontSize: 10,
            fill: "#fff",
          },
        },
        grid: {
          left: "10%",
          right: "5%",
          top: "20%",
          bottom: "10%",
        },
        xAxis: {
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
          axisLabel: {
            style: {
              fill: "#fff",
              fontSize: 10,
            },
          },
        },
        yAxis: {
          data: "value",
          minInterval: 1,
          axisLabel: {
            style: {
              fill: "#fff",
              fontSize: 10,
            },
          },
          splitLine: {
            style: {
              stroke: "#14344d",
            },
          },
        },
        series: [
          {
            name: "信访",
            data: [120, 220, 190, 210, 350, 420, 385],
            type: "line",
            smooth: true,
            lineStyle: {
              stroke: "#489cff",
            },
          },
          {
            name: "超级访",
            data: [234, 213, 456, 321, 352, 334, 345],
            type: "line",
            smooth: true,
            lineStyle: {
              stroke: "#f29a40",
            },
          },
          {
            name: "诉讼案件",
            data: [452, 342, 256, 365, 367, 234, 387],
            type: "line",
            smooth: true,
            lineStyle: {
              stroke: "#48ffa5",
            },
          },
        ],
      },
      manageOption: {
        legend: {
          top: 20,
          data: [
            { name: "受理量", color: "#489cff" },
            { name: "办结率", color: "#f29a40" },
          ],
          textStyle: {
            fontSize: 10,
            fill: "#fff",
          },
        },
        grid: {
          left: "10%",
          right: "5%",
          top: "20%",
          bottom: "15%",
        },
        xAxis: {
          data: [
            "大兴区",
            "怀柔区",
            "平谷区",
            "崇文区",
            "宣武区",
            "丰台区",
            "顺义区",
          ],
          axisLabel: {
            style: {
              fill: "#fff",
              fontSize: 10,
            },
          },
        },
        yAxis: {
          data: "value",
          minInterval: 1,
          axisLabel: {
            style: {
              fill: "#fff",
              fontSize: 10,
            },
          },
          splitLine: {
            style: {
              stroke: "#14344d",
            },
          },
        },
        series: [
          {
            name: "受理量",
            data: [120, 220, 190, 210, 350, 420, 385],
            type: "bar",
            gradient: {
              color: ["#0c6294", "#02f0c9"],
            },
            barStyle: {
              stroke: "rgba(103, 224, 227, 1)",
            },
          },
          {
            name: "办结率",
            data: [234, 213, 456, 321, 352, 334, 345],
            type: "line",
            smooth: true,
            lineArea: {
              show: true,
              gradient: ["rgba(254, 158, 58, 0.8)", "rgba(254, 158, 58, 0.3)"],
            },
            lineStyle: {
              stroke: "#fe9e3a",
            },
          },
        ],
      },
      tabIndex: 1,
      rateConfig: {
        rowNum: 10,
        data: [
          {
            name: "朝阳区",
            value: 1245,
          },
          {
            name: "朝阳区",
            value: 1045,
          },
          {
            name: "朝阳区",
            value: 965,
          },
          {
            name: "朝阳区",
            value: 806,
          },
          {
            name: "朝阳区",
            value: 738,
          },
          {
            name: "朝阳区",
            value: 654,
          },
          {
            name: "朝阳区",
            value: 542,
          },
          {
            name: "朝阳区",
            value: 442,
          },
          {
            name: "朝阳区",
            value: 542,
          },
          {
            name: "朝阳区",
            value: 642,
          },
          {
            name: "朝阳区",
            value: 142,
          },
        ],
        unit: '%'
      },
      timeConfig: {
        rowNum: 10,
        data: [
          {
            name: "朝阳区",
            value: 12,
          },
          {
            name: "朝阳区",
            value: 10,
          },
          {
            name: "朝阳区",
            value: 9,
          },
          {
            name: "朝阳区",
            value: 8,
          },
          {
            name: "朝阳区",
            value: 7,
          },
          {
            name: "朝阳区",
            value: 6,
          },
          {
            name: "朝阳区",
            value: 5,
          },
          {
            name: "朝阳区",
            value: 4,
          },
          {
            name: "朝阳区",
            value: 3,
          },
          {
            name: "朝阳区",
            value: 2,
          },
          {
            name: "朝阳区",
            value: 1,
          },
        ],
        unit: '天'
      },
    };
  },
  methods: {
    onTabClick(index) {
      this.tabIndex = index
    }
  },
  created() {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
@import "../../style//livelihoodIndex.scss";
</style>
